<template>
	<view class="fy-scroll-bar">
		<scroll-view scroll-x :class="viewMode=='day'?'bg-white nav':'bg-moon-blue nav'" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?(viewMode=='day'?'text-blue cur':'text-main-yellow cur'):'text-grey'" v-for="(item,index) in musicCatList" :key="index" @tap="tabSelect" :data-id="index">
				{{item.music_cat_name}}
			</view>
		</scroll-view>
		<view style="height: calc(100vh - 315px);" v-for="item,index in musicCatList" :key="index" :class="viewMode=='day'?'bg-white music-list music-list-'+index:'bg-night-black music-list music-list-'+index" v-if="index==TabCur">
			<view class="music-item flex-center-column" v-for="music,index_music in musicCatList[index].music" :key="index_music" v-if="musicCatList[index].music.length>0" @click="changeMusic(music)">
				<view class="music-icon">
					<image :src="music.music_icon" class="music-icon__img"></image>
				</view>
				<view class="music-title text-grey">
					{{music.music_title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"fy-scroll-bar",
		props:{
			viewMode:{
				type:String,
				default:"day"
			},
			bgColor:{
				type:String,
				default:""
			},
			musicCatList:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0
			};
		},
		created() {

		},
		methods:{
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			changeMusic(music){
				uni.pageScrollTo({
					duration:50,
					scrollTop:0
				})
				this.$emit("selectMusic",music);
			}
		}
	}
</script>

<style scoped lang="scss">
	.fy-scroll-bar {
		width: 100%;
		.music-list {
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			flex-wrap: wrap;
			overflow-y: auto;
			padding-bottom: 80px;
			.music-item {
				width: 25%;
				height:60px;
				margin-top: 2em;
				position:relative;
				.music-icon {
					height:40px;
					&__img {
						height: 30px;
						width: 30px;
					}
				}
				.circle-background {
					border-radius: 50%;
					opacity: 0.3;
				}
				.music-title {
					height: 20px;
					width: 100%;
					text-align: center;
					margin-top: .5em;
					line-height: 20px;
					font-size: 12px;
					color: #707070;
				}
			}
		}
	}
</style>